<template>
	<view class="content">
		<view class="image">
			<img src="../../static/images/zhangdan.jpg" alt="" srcset="">
		</view>
		<view class="main" v-if="inspectionRecordsData.length > 0">
			<view class="bot" v-for="(item,index) in inspectionRecordsData">
				<view class="box">
					<view class="flex">
						<view class="time">
							{{item.operTime}}
						</view>
						<view class="text">
							{{item.descn}}
						</view>
					</view>
					<view class="score">
						{{item.score}}积分
					</view>

				</view>
				<view class="final-line" v-if="index == inspectionRecordsData.length-1">

				</view>
				<view class="line" v-if="index !==inspectionRecordsData.length-1">

				</view>
			</view>
			<u-loadmore :status="status" :iconSize="17" />
		</view>
		<view class="" v-else>
			<view class="center">
				<img src="../../static/images/no_data.png" class="no_data">
				<div>暂无内容~</div>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				page: 1,
				limit: 15,
				inspectionRecordsData: [],
				//需要加载的数据必须要触碰到每一页的底部才会加载数据
				status: 'loadmore',
				suo: true,
			}
		},
		methods: {
			getInspectionData() {
				let that = this

				request.get('/api/inspection/page', {
					page: this.page,
					limit: this.limit
				}).then(res => {
					if (res.code == 0) {
						console.log(res.data, '2222211111111111111')
						this.inspectionRecordsData = res.data.list
						if (res.data.list.length == '') {
							this.status = 'nomore';
							this.suo = false
						} else if (res.data.list.length < 15) {
							this.status = 'nomore';
							this.suo = false
						} else if (res.data.list.length = 15) {
							this.status = 'loadmore';
							this.suo = true
						}
					}
				})
			},
			getPullInspectionData() {
				let that = this
			
				request.get('/api/inspection/page', {
					page: this.page,
					limit: this.limit
				}).then(res => {
					if (res.code == 0) {
						console.log(res.data, '2222211111111111111')
						this.inspectionRecordsData = this.inspectionRecordsData.concat(res.data.list) 
						if (res.data.list.length == '') {
							this.status = 'nomore';
							this.suo = false
						} else if (res.data.list.length < 15) {
							this.status = 'nomore';
							this.suo = false
						} else if (res.data.list.length = 15) {
							this.status = 'loadmore';
							this.suo = true
						}
					}
				})
			},
		},
		onShow() {
			this.getInspectionData()
		},
		onReachBottom() {
			if (this.suo) { //定义个小锁，当没有数据时锁住suo
				this.status = 'loading';
				this.page = ++this.page;
				setTimeout(() => {
					this.getPullInspectionData()
				}, 1000)
				return;
			}
		},
	}
</script>

<style lang="less">
	.content {
		width: 750rpx;
		height: 1624rpx;
		background: #F1F4F9;
	}

	.image {
		width: 702rpx;
		height: 250rpx;
		margin: 24rpx 24rpx 0 24rpx;

		img {
			width: 702rpx;
			height: 250rpx;
		}
	}

	.main {
		// width: 702rpx;
		// height: 323rpx;
		background: #FFFFFF;
		margin-top: 24rpx;
		padding: 18rpx 24rpx 30rpx 24rpx;

		.box {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.flex {
				width: 45%;

				// padding: 24rpx 0;
				.time {
					font-family: Source Han Sans SC;
					font-weight: 400;
					font-size: 18rpx;
					color: #000000;
					opacity: 0.45;
					padding-top: 17rpx;
				}

				.text {
					font-family: Source Han Sans SC;
					font-weight: 400;
					font-size: 24rpx;
					color: var(--global-bg-color);
					padding-bottom: 17rpx;
					overflow: hidden;
					/* 内容超出裁剪 */
					white-space: nowrap;
					/* 文本属性：不支持换行 */
					text-overflow: ellipsis;
					/* 文本超出当前后属性，属性值ellipsis多余部分使用省略号 */
				}
			}

			.score {
				// width: 39%;
				font-family: Source Han Sans SC;
				font-weight: 500;
				font-size: 40rpx;
				color: #000000;
				// line-height: 11rpx;
				opacity: 0.85;
			}
		}

		.line {
			border-bottom: 1rpx solid #EBEBEB;
		}

		.final-line {

			border-bottom: 5rpx dotted rgb(124, 139, 164);
		}

		.alarm {
			display: flex;
			align-items: center;
			margin-top: 31rpx;

			img {
				width: 18rpx;
				height: 18rpx;
				margin-right: 15rpx;
			}

			.txt {
				font-family: Source Han Sans SC;
				font-weight: 400;
				font-size: 18rpx;
				color: #000000;
				line-height: 11rpx;
				opacity: 0.45;
			}
		}
	}

	.center {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		text-align: center;
		margin-top: 200rpx;
	}

	.no_data {
		width: 380rpx;
		height: 300rpx;
	}

	.no_data {
		width: 380rpx;
		height: 300rpx;
	}
</style>